<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜品管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="./css/admin.css">
</head>
<body>
<div class="container">
    <header>
        <div class="logo">
            <svg t="1752027831465" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8267" width="500" height="500" style="
                width: 30px;
                height: 30px;
            ">
                <path d="M313.319402 535.947661c9.799043 109.489308 29.59711 340.966702 29.59711 383.162582 0.499951 4.19959 0.599941 8.39918 0.499951 12.59877-1.299873 51.394981-43.395762 92.190997-94.490772 92.190997h-2.399766c-0.699932 0-1.399863-0.09999-2.099795-0.09999-55.39459-3.699639-97.290499-51.694952-93.59086-107.089543 0-32.896787 20.997949-269.473684 30.896983-382.862611 1.999805-22.297822-7.899229-43.995704-25.997461-57.194414C85.441656 425.758422 44.64564 342.366566 49.04521 254.175178 49.04521 113.788888 137.536569 0 246.525925 0s197.580705 113.788888 197.580705 256.574944c4.799531 87.891417-35.396543 171.183283-105.089737 222.378283-17.998242 13.098721-27.697295 34.796602-25.697491 56.994434zM863.965628 0c17.698272 0 31.996875 14.298604 31.996876 31.996875v271.97344c0 52.994825-21.497901 100.990138-56.194513 135.78674-12.79875 12.79875-27.497315 23.897666-43.495752 32.696807-8.899131 4.899522-14.098623 14.698565-12.89874 24.797578l42.295869 382.962602c3.499658 78.192364-51.994922 143.785958-121.588126 143.785958S578.993458 958.406406 582.493116 880.214042l44.795625-381.962699c1.199883-9.999024-3.899619-19.598086-12.79875-24.297628-60.994044-32.396836-102.489991-96.290597-102.489991-169.9834V31.996875c0-17.698272 14.298604-31.996875 31.996875-31.996875s31.996875 14.298604 31.996876 31.996875v263.974222c0 13.298701 10.698955 23.997656 23.997656 23.997656s23.997656-10.698955 23.997657-23.997656V31.996875c0-17.698272 14.298604-31.996875 31.996875-31.996875s31.996875 14.298604 31.996875 31.996875v271.97344c0 8.799141 7.199297 15.998438 15.998438 15.998438s15.998438-7.199297 15.998437-15.998438V31.996875c0-17.698272 14.298604-31.996875 31.996876-31.996875s31.996875 14.298604 31.996875 31.996875v263.974222c0 13.298701 10.698955 23.997656 23.997657 23.997656s23.997656-10.698955 23.997656-23.997656V31.996875c0-17.698272 14.298604-31.996875 31.996875-31.996875z" p-id="8268" fill="#ff6b6b"></path>
            </svg>
            <h1>菜品管理系统</h1>
        </div>
        <div class="controls">
            <button class="btn btn-primary" id="addDishBtn">
                <svg style="width: 15px;height: 15px;" t="1752027309975" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3868" width="500" height="500"><path d="M508.9 926.4c-36.3-1.6-64.6-32.2-64.6-68.6V166.1c0-36.3 28.3-66.9 64.6-68.6 38.8-1.7 70.7 29.2 70.7 67.6v693.7c0 38.4-31.9 69.4-70.7 67.6z" fill="#ffffff" p-id="3869"></path><path d="M858.9 579.6H165.2c-37.4 0-67.6-30.3-67.6-67.6 0-37.4 30.3-67.6 67.6-67.6h693.7c37.4 0 67.6 30.3 67.6 67.6 0 37.4-30.3 67.6-67.6 67.6z" fill="#ffffff" p-id="3870"></path></svg> 添加菜品
            </button>
        </div>
    </header>

    <div class="search-container">
        <div class="search-header">
            <h2><i class="fas fa-search"></i> 搜索菜品</h2>
        </div>
        <div class="form-group">
            <input type="text" id="searchName" class="form-control" placeholder="输入菜品名称进行搜索...">
            <!-- 修复位置的清空按钮 -->
            <button class="clear-btn" id="clearSearchBtn">
                <svg t="1752027644184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4928" width="500" height="500" style="width: 15px;height: 15px;"><path d="M852.901888 256.671744L597.38466987 512.18896213l256.6422528 256.6422528c23.6519424 23.6519424 23.69672533 61.84850773 0.1867776 85.35845547-23.494656 23.494656-61.6923136 23.44987307-85.344256-0.20097707L512.2260992 597.34644053 256.70888107 852.86475093c-23.50230187 23.50230187-61.7447424 23.412736-85.344256-0.1867776-23.62135893-23.62135893-23.7109248-61.86379947-0.20862294-85.36610133l255.51721814-255.51721813-256.63460694-256.6356992c-23.60715947-23.60715947-23.68907947-61.84086187-0.1933312-85.33661014 23.5175936-23.5175936 61.75238827-23.4356736 85.35845547 0.17148587l256.6356992 256.6356992 255.50957227-255.50957227c23.53943893-23.53943893 61.73709653-23.4061824 85.35845546 0.2162688 23.5995136 23.59842133 23.7338624 61.79607893 0.19442347 85.33551787z m0 0" fill="#bfbfbf" p-id="4929"></path></svg>
            </button>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h2><i class="fas fa-list"></i> 菜品列表</h2>
            <div id="totalCount">共 <span id="dishCount">8</span> 条记录</div>
        </div>
        <div class="card-body">
            <div class="table-container">
                <table>
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>菜品图片</th>
                        <th>菜品名称</th>
                        <th>描述</th>
                        <th>分类</th>
                        <th>价格</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="dishTable">
                    <!-- 菜品数据将通过JS动态填充 -->
                    </tbody>
                </table>
            </div>
            <div id="noResults" class="no-results" style="display: none;">
                <i class="fas fa-search"></i>
                <h3>未找到匹配的菜品</h3>
                <p>请尝试其他搜索关键词</p>
            </div>
        </div>
    </div>

</div>

<!-- 添加/编辑菜品模态框 -->
<div class="modal" id="dishModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalTitle">添加菜品</h3>
            <button class="close-btn" id="closeModal">&times;</button>
        </div>
        <div class="modal-body">
            <form id="dishForm">
                <input type="hidden" id="dishId">

                <div class="form-row">
                    <div class="form-group">
                        <label for="name"><i class="fas fa-tag"></i> 菜品名称 *</label>
                        <input type="text" id="name" class="form-control" required maxlength="10" placeholder="输入菜品名称">
                    </div>

                    <div class="form-group">
                        <label for="price"><i class="fas fa-tag"></i> 价格 (元) *</label>
                        <input type="number" id="price" class="form-control" min="0" step="1" value="0" required>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="category"><i class="fas fa-list"></i> 分类 *</label>
                        <!-- 修改为输入框并添加分类列表容器 -->
                        <input type="text" id="category" class="form-control"
                               placeholder="输入或选择分类" required
                               autocomplete="off" maxlength="5">
                        <div id="categoryList" class="category-list"></div>
                    </div>
                    <!-- 排序字段 -->
                    <div class="form-group">
                        <label for="sort"><i class="fas fa-sort"></i> 排序值</label>
                        <input type="number" id="sort" class="form-control" min="0" value="0" required>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="description"><i class="fas fa-align-left"></i> 菜品描述</label>
                        <textarea id="description" class="form-control" rows="3" maxlength="30" placeholder="输入菜品描述，最多30个字符"></textarea>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label><i class="fas fa-image"></i> 菜品图片</label>
                        <div class="image-upload" id="imageUpload">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <p>点击或拖拽图片到此处上传</p>
                            <img id="imagePreview" class="image-preview" alt="菜品图片预览">
                        </div>
                        <input type="file" id="imageInput" accept="image/*" style="display: none;">
                    </div>
                </div>
            </form>
        </div>
        <div class="form-footer">
            <button class="btn btn-secondary" id="cancelBtn">取消</button>
            <button class="btn btn-primary" id="saveBtn">保存菜品</button>
        </div>
    </div>
</div>

<script src="./js/admin.js"></script>
</body>
</html>